<script setup>
import {ref, onMounted, inject} from 'vue'
import {useRoute} from 'vue-router'

const route=useRoute()
const path_list=inject('path_list')
path_list.value=route.matched

//////////////////
const score=[
  5,1,1,0.8,1
]
//////////////////

onMounted(()=>{
    window.scrollTo(0,0)
})

const month_or_year=ref('月度')
const period=ref()

function sum(x){
  var t=0
  x.forEach((item)=>{t+=item})
  return t
}
const total=sum(score)
const total_status=(()=>{
  if(total==100) return 'success'
  if(total>=90) return ''
  if(total>=80) return 'warning'
  return 'exception'
})()

const scores_max=[
  5,1,1,2,1
]
const scores=[
  {
    title:'组织设置规范',
    sons:(()=>{
      return [
        {
          title:'机关党支部设置',
          sons:(()=>{
            return [
              {
                title:'凡是有正式党员3人以上的，都应当单独成立党支部；正式党员不足3人的，就近就便与其他部门联合建立党支部；党支部党员人数一般不超过50人。党员人数在20人以上的党支部，一般应当划分若干党小组。未按规定设置的扣5分。',
                score:score[0],
                score_max:scores_max[0]
              }
            ]
          })(),
          score:score[0],
          score_max:scores_max[0]
        }
      ]
    })(),
    score:sum(score.slice(0,1)),
    score_max:sum(scores_max.slice(0,1))
  },
  {
    title:'班子建设规范',
    sons:(()=>{
      return [
        {
          title:'严格按期换届选举',
          sons:(()=>{
            return [
              {
                title:'支委会任期届满进行换届选举。未按期按程序进行选举的扣1分。',
                score:score[1],
                score_max:scores_max[1]
              }
            ]
          })(),
          score:score[1],
          score_max:scores_max[1]
        },
        {
          title:'支委会班子届中补选',
          sons:(()=>{
            return [
              {
                title:'支委会任期届中，党支部书记、副书记、委员出现空缺，应当及时进行补选。支部书记空缺6个月以上、其他支委人员空缺3个月以上的，按人次扣0.5分。',
                score:score[2],
                score_max:scores_max[2]
              }
            ]
          })(),
          score:score[2],
          score_max:scores_max[2]
        },
        {
          title:'支委会自身建设',
          sons:(()=>{
            return [
              {
                title:'加强学习型支部建设，开展“每人每月读一本书”活动。未开展的每月扣0.2分。',
                score:score[3],
                score_max:scores_max[3]
              },
              {
                title:'充分发挥支部会集体领导作用，加强对党支部日常工作的领导和管理，按期向党支部党员大会和上级党组织报告工作。未开展的扣1分。',
                score:score[4],
                score_max:scores_max[4]
              }
            ]
          })(),
          score:sum(score.slice(3,5)),
          score_max:sum(scores_max.slice(3,5))
        }
      ]
    })(),
    score:sum(score.slice(1,5)),
    score_max:sum(scores_max.slice(1,5))
  }
]

function handleIndex(){
  router.push({path:'index'})
}
</script>

<template>
<div class="break">
  <span>总分</span>
</div>
<div class="total">
  <el-progress type="dashboard" :percentage="total" :stroke-width="10" :status="total_status" :width="100">
    <template #default="{ percentage }">
      <span class="percentage-value">{{ percentage }}</span>
      <span class="percentage-label">总分</span>
    </template>
  </el-progress>
  <el-button type="warning" plain round>处室排行榜</el-button>
</div>
<hr style="width:100%; margin-bottom:10px;">
<div class="break">
  <span>分项得分</span>
</div>
<div class="content">
  <el-collapse accordion>
    <el-collapse-item v-for="(item, index) in scores" :name="index" class="level1">
      <template #title>
        <span>{{ item.title }}</span>
        <el-rate
          v-model="item.score"
          :max="item.score_max"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
        />
      </template>
      <div v-for="(x, i) in item.sons">
        <el-popover placement="bottom" trigger="click" width="50%">
          <template #reference>
            <div class="level2">
              <span>{{ x.title }}</span>
              <el-rate
                v-model="x.score"
                :max="x.score_max"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </div>
          </template>
          <div v-for="y in x.sons">
            <span>{{ y.title }}</span>
            <br>
            <el-rate
                v-model="y.score"
                :max="y.score_max"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
            />
            <hr>
          </div>
        </el-popover>
      </div>
    </el-collapse-item>
  </el-collapse>
</div>
</template>

<style lang="scss" scoped>
.break{
  width:300px;
  height:36px;
  line-height: 36px;
  text-align:center;
  position:relative;
  span{
    font-size:20px;
    color:#1296db;
    &::before, &::after{
      position:absolute;
      background-repeat:no-repeat;
      content:"";
      height:32px;
      width:38px;
    }
    &::before{
      left:50px;
      background-image:url("/麦穗左.png");
    }
    &::after{
      right:50px;
      background-image:url("/麦穗右.png");
    }
  }
}
.total{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:20px;
  .percentage-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
  }
  .percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 12px;
  }
  .el-progress--dashboard {
    margin:10px 20px;
  }
}
.content{
  width:100%;
  margin:10px 10px 10px 0;
  display:flex;
  flex-direction:column;
  .level1{
    span{
      width:200px;
      text-align: left;
      font-size:18px;
      margin-left:10px;
    }
  }
  .level2{
    display:flex;
    align-items:center;
    span{
      width:200px;
      font-size:16px;
      color:gray;
      margin-left:10px;
    }
  }
}
</style>